<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>API Pages</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.6.0/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="row">
            <div class="col-sm-3">
                <nav class="navbar bg-dark navbar-dark">
                    <h2 class="nav-title">API</h2>
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown" v-for="(item, index) in items" :key="index">
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                                {{
                                    (item.key.charAt(0) == "/" ? item.key.substr(1) : (item.key.charAt(item.key.length - 1) == "/" ?item.key.substr(0, item.key.length - 1) : item.key)) || '/'
                                }}
                            </a>
                            <div class="dropdown-menu">
                                <span @click="change_rows(child)" class="dropdown-item" v-for="(child, child_index) in item.children" :key="child_index">
                                    {{
                                        (child.rule.charAt(0) == "/" ? child.rule.substr(1) : (child.rule.charAt(item.key.length - 1) == "/" ?child.rule.substr(0, child.rule.length - 1) : child.rule)) || '/'
                                    }}
                                </span>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="col-sm-8" style="margin-top: 10px" v-if="item.rule">
                <h3>Path: {{
                        (item.rule.charAt(0) == "/" ? item.rule.substr(1) : (item.rule.charAt(item.rule.length - 1) == "/" ?item.rule.substr(0, item.rule.length - 1) : item.rule)) || '/'
                    }}</h3>
                <h5>Method: {{ !item.method ?'' : item.method.toLocaleUpperCase() }}</h5>

                <h5>parameter: </h5>
                <div class="row">
                    <div class="col-sm-3">paramName</div>
                    <div class="col-sm-3">paramType</div>
                    <div class="col-sm-3">default</div>
                </div>
                <div v-for="(param, index) in item.parameter" :key="index">
                    <div v-if="param.type">
                        <div class="row">
                            <div class="col-sm-3">{{ param.name }}</div>
                            <div class="col-sm-3">{{ param.type }}</div>
                            <div class="col-sm-3">{{ param.default }}</div>
                        </div>
                    </div>
                    <div v-else style="margin-top: 10px">
                        paramName: {{ index }}
                        <div class="row" v-for="(params, index) in param" :key="index">
                            <div class="col-sm-3">{{ params.name }}</div>
                            <div class="col-sm-3">{{ params.type }}</div>
                            <div class="col-sm-3">{{ params.default }}</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
<script>
    const {
        h, watch, ref, unref
    } = Vue
    const methods = {
        getAPiList: function (items, item) {
            $.ajax({
                url: '/e10adc3949ba59abbe56e057f20f883e',
                success: res => {
                    const obj = []
                    for (const key in res.items.router) {
                        obj.push({
                            key: key,
                            children: res.items.router[key]
                        })
                    }

                    obj.forEach(element => {
                        element.children.forEach(e => {
                            Object.keys(e.parameter).map(v => {
                                if (e.parameter[v].type === 'class') {
                                    e.parameter[v] = res.items.routerParams[e.parameter[v].class]
                                }
                            })
                        })
                    })
                    items.value = obj
                    item.value = obj[0].children[0]
                }
            })
        }
    }
    Vue.createApp({
        setup(props, $) {
            const items = ref({})
            const item = ref({})
            methods.getAPiList(items, item)
            const change_rows = function (data) {
                item.value = unref(data)
            }
            return {
                items,
                item,
                change_rows
            }
        }
    }).mount('#app')
</script>
<style>
    #app {
        overflow: hidden;
    }
    .navbar {
        height: 100vh;
        overflow-y: scroll;
    }
    .navbar::-webkit-scrollbar {
        display: none;
    }
    .navbar-nav {
        position: absolute;
        top: 46px;
    }
    .nav-title {
        position: absolute;
        top: 10px;
        text-align: center;
        width: 280px;
        color: #fff;
    }
    .dropdown-menu {
        background-color: transparent;
        color: #868e90;
        border: 0;
    }
    .dropdown-item {
        color: #868e90;
    }
</style>
</html>